<stars>
    <div class="star" each="{ n in range() }" onclick="{ click(n+1) }" 
    onmouseover="{ mouseover(n) }" onmouseleave="{ mouseleave(n) }">
        <span style="color: { getColor(n) };">
            <i class="fa fa-{icon}"></i>
            <i class="fa icon-copy fa-{icon} is-hidden"></i>
        </span>
    </div>

    <script>
        function getNumber(val, defaultVal){
            return isNaN(Number(val)) ? defaultVal : val
        }
        this.mixin({
            get initial(){
                return getNumber(opts.current, 0)
            },
            get current(){
                let val = this.initial
                if(this.val !== val){
                    this.val === val
                }
                //console.log(this.val)
                return this.val 
            },
            get size(){
                return getNumber(opts.size, 5)
            },
            get icon(){
                return opts.icon || 'star'
            }
        })
        this.val = this.initial

        const REVERSE_COLOR = '#bbb'
        const DEFAULT_COLOR = '#f5bd23'
        this.getColor = (n)=>{
            return n < this.current ? (opts.color || DEFAULT_COLOR):REVERSE_COLOR
        }

        this.hasEffect = (n) =>{
            return this.animate && this.val === n
        }

        this.range = ()=>{
            let items = []
            for(let i=0; i< this.size; i++){
                items.push(i)
            }
            return items
        }

        this.mouseover = (n)=>{
            return (e) =>{
                if(opts.readonly) return
                this.val = n + 1
                this.update()
            }
        }
        this.mouseleave = (n)=>{
            return (e)=>{
                if(opts.readonly) return
                this.val = this.initial
                this.update()
            }
        }

        this.click = (i)=>{
            return (e)=>{
                if(opts.readonly || this.val===this.initial) return
                if(opts.effect){
                    let el = this.root.querySelectorAll('.icon-copy')[i-1]
                    let className = 'effect-' + opts.effect
                    el.classList.remove('is-hidden')
                    el.classList.add(className)
                    setTimeout(()=>{
                        el.classList.add('is-hidden')
                        el.classList.remove(className)
                    }, 1100)
                }
                if(opts.change){
                    opts.change.call(null,this.val)
                }
            }
        }
    </script>
    <style type="text/less">
    @import 'src/app/assets/less/variables.less';
    :scope {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: @color-primary;

        span {
            margin: 0 .2rem 0 0;
            line-height:1;
            position: relative;
            display:inline-block;
        }
        i {
            line-height:1;
            cursor: pointer;
        }
        .icon-copy{
            position:absolute;bottom:0;
            /*margin-left:-100%;*/
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }
        .effect-grow{
            animation-name: grow;
        }
        .effect-rotate{
            animation-name: grow-rotate;
        }
        .effect-fade{
            animation-name: fade;
        }
    }
    @keyframes grow{0%{transform:scale(1)}99%{transform:scale(4);opacity:0;}to{transform:scale(1);opacity:0;}}
    @keyframes grow-rotate{0%{transform:scale(1) rotate(0deg)}99%{transform:scale(4) rotate(90deg);opacity:0}to{transform:scale(1) rotate(0deg);opacity:0;}}
    @keyframes fade{0%{transform:translate3d(0,0,0)}99%{transform:translate3d(0,-40px,0);opacity:0;}to{transform:scale(1) translate3d(0,0,0);opacity:0}}
    </style>
</stars>